<template>
  <div id="app">
    <div id="main">
      <router-view/>
    </div>
    <div id="footer">
      <router-link to="/home">
      <van-icon name="wap-home-o" />
      <span>首页</span>
      </router-link> 
      <router-link to="/classfiy">
      <van-icon name="apps-o" />
      <span>分类</span>
      </router-link>
      <router-link to="/look">
      <van-icon name="eye-o" />
      <span>看点</span>
      </router-link>
      <router-link to="/shopCar">
      <van-icon name="shopping-cart-o" />
      <span>购物车</span>
      </router-link>
      <router-link to="/my">
      <van-icon name="contact" />
      <span>我的</span>
      </router-link>
    </div>
    
  </div>
</template>

<style lang="scss">
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
html,body,#app{
  width: 100%;
  height: 100%;
}
#app{
  display: flex;
  flex-direction: column;
  #main{
    flex: 1;
    overflow-y: scroll;
  }
  #footer{
    width: 100%;
    height: 50px;
    background: #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a{
      color: #333;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .van-icon{
        font-size: 25px;
      }
    }
    .router-link-active{
      color: orangered;
    }
  }
}
</style>
